<template>
  <div class="excelBody-box">
    <!--    data 输出数据-->
    <!--    fields 对象字段-->
    <!--    export-fields-->
    <!--    type 表哥类型-->
    <!--    name 名称-->
    <!--    header 表格标题-->
    <!--    footer 页脚-->
    <div class="down-btn">
      <download-excel
        class="export-excel-wrapper"
        :data="json_data"
        :fields="json_fields"
        :title="fileName"
        :name="`${fileName}.xls`"
        :footer="footerOption">
        <el-button type="primary" size="small">导出EXCEL</el-button>
      </download-excel>
    </div>
    <div class="table-box">
      <div class="table-box-header">
        {{ fileName }}
      </div>
      <div class="table-box-content">
        <div class="table-box-tr table-box-tr-th">
          <div class="table-box-td" v-for="(item, index) in json_fields" :key="item">
            {{ index }}
          </div>
        </div>
        <div class="table-box-tr table-box-tr-line" v-for="(item, index_tr) in json_data" :key="index_tr">
          <div class="table-box-td" v-for="(td, index_td) in json_fields" :key="td">
            {{ item[td] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import downloadJson from './excelData.js'

export default {
  props: ['excelData'],
  data() {
    return {
      fileName: '',
      footerOption: '',
      pageType: '',
      json_data: [],
      json_fields: {}
    }
  },
  components: {},
  created() {
  },
  methods: {
    initData(data) {
      let n = this;
      n.pageType = data.type
      n.json_fields = downloadJson.data[data.type].keyName
      // n.fileName= downloadJson.data[data.type].fileName
      n.fileName = Number(data.data.orderType) === 1 ? '采购未下单明细表' : '采购已下单明细表'
      n.footerOption = downloadJson.data[data.type].footer
      if (data.type === 'purchase_order') {
        // 接收导出数据
        n.dataExcelFn(data.data)
      }
    },
    dataExcelFn(option) {
      console.log('收到的数据：', option, this.pageType, downloadJson)
      let list_ = []
      let {data} = option

      for (let item of data) {
        list_.push({
          realname: item.user ? item.user.realname : '--',
          name: item.name,
          actual_number: item.status === 3 ? item.actual_number : item.need_number,
          price: item.price,
          create_time: item.create_time,
          url: item.url,
          remark: item.remark
        })
      }
      this.json_data = JSON.parse(JSON.stringify(list_))
      console.log(this.json_fields, this.json_data)
    },
    lineData() {

    }
  }
}
</script>


<style scoped>
.table-box {
  border: 1px solid #ddd;
  background: #fff;
  font-size: 12px;
}

.table-box-header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ddd;
}

.table-box-tr {
  display: flex;
}

.table-box-tr-th .table-box-td {
  height: 30px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.table-box-tr-line .table-box-td {
  padding: 10px 0;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  overflow-wrap: break-word;
  word-break: break-all;
}

.table-box-tr:last-child .table-box-td {
  border-bottom: none;
}

.table-box-td:last-child {
  border-right: none;
}

.excelBody-box {
  padding: 5px;
}

.down-btn {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
</style>
